<template>
  <div class="foot">
    <ul>
        <li 
          v-for="(item,index) in footerList"
          :class="{active:nowIndex === index}"
          :key="index"
          @click="tab(index)"
        >
            <span :class="item.icon"></span>
            <span>{{item.title}}</span>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    // 配置数据
    data(){
        return{
            nowIndex:0,
            footerList:[
                {title:"首页",icon:"iconfont icon-qiandai"},
                {title:"列表",icon:"iconfont icon-danlieliebiao"},
                {title:"购物车",icon:"iconfont icon-lingshi"},
                {title:"我的",icon:"iconfont icon-qiandai"},

            ],
        }
    },
    methods: {
                tab(index){
                    this.nowIndex = index
                    // 传入index修改页面内容
                    this.$emit('tab',index)

                }
            },
}
</script>

<style lang="less" scoped>
    .foot{
        height: 100px;
        background-color: yellow;
        ul{
            display: flex;
            list-style: none;
            justify-content: space-around;
            li{
                height: 100px;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                &.active{
                    background-color: red;
                    color: white;
                }
                
            }
        }
    }

</style>